<template>
    <div id="application-progress">
        <div class="inner">
            <div class="content">
                <div class="bg_img">
                    <img src="../../assets/img/index/attend-bg.png" alt="" srcset="">
                </div>

                <div class="title">{{ title }}</div>
                <div class="wrap">
                    <component :is="componentID" :isConfirm="isConfirm" :process="current"
                        :wattingStatus="wattingStatus">
                    </component>
                </div>
            </div>
            <div class="qr-code">
                <div class="p1">
                    扫码获取应聘记录
                </div>
                <img src="../../assets/img/progress/qr-code.jpg" alt="">
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script setup lang='ts'>
import Footer from '@/components/Footer.vue';
import NoProgress from './NoProgress.vue';
import UnderWay from './UnderWay.vue';
import WaittingForNext from './WaittingForNext.vue';
import { useStore } from '@/store';
const store = useStore()
const { resumeInfo, resumeProcess } = store as any
const title = ref<string>("应聘进度");

const componentID = shallowRef<any>(UnderWay);

const isConfirm = ref<string>("未通过");
const wattingStatus = ref<string>("0");  //0通过面试 1 预约培训成功 /2通过考核
const current = ref<string>("0");
const route = useRoute();
const query = route.query
const { process } = query
wattingStatus.value = query.passedStatus as string;

current.value = process + ''
// componentID.value = componentMap[resumesStatus + '']
// resumesStatus //来决定 能不能进入流程0 通过  1不通过
console.log(query.passedStatus)
//现根据这个判定 通过不通过了
if (query.resumesStatus == 1) {
    componentID.value = UnderWay
} else {
    console.log(process)
    if (process == '3-2' || process == '4-1' || process == "6-0") {
        if (process == "6-0") {
            if (resumeProcess.resumesStatus == 1) {
                componentID.value = UnderWay
            } else {
                componentID.value = WaittingForNext
            }
        } else {
            componentID.value = WaittingForNext
        }
    } else {
        componentID.value = WaittingForNext
    }
}

watch(resumeInfo, (val) => {
    if (!val.resumesId) {
        current.value = "0";
        componentID.value = NoProgress
    }
}, { immediate: true, deep: true })
</script>

<style lang="scss" scoped>
#application-progress {
    background: #F5F7FB;
    width: 100vw;
    height: 100vh;
    padding-top: 72px;
    box-sizing: border-box;

    .inner {
        width: calc(934px + 24px + 242px);
        height: 712px;
        margin: 30px auto 30px auto;
        display: flex;
        gap: 24px;

        .content {
            width: 934px;
            height: 100%;
            background: #fff;
            position: relative;
            padding: 27px 20px;
            box-sizing: border-box;

            .bg_img {
                position: absolute;
                width: 934px;
                left: 0;
                top: 0;
                display: flex;
                justify-content: right;
                background: linear-gradient(180deg, #C7D5EA 0%, rgba(229, 235, 244, 0.3) 100%);
            }

            .title {
                position: absolute;
                font-weight: 500;
                font-size: 24px;
                color: #2C3A50;
            }

            .wrap {
                position: absolute;
                top: 97px;
            }
        }

        .qr-code {
            width: 242px;
            height: 323px;
            padding: 45px 38px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #fff;



            img {
                margin: 21px 0 5px 0;
            }

            .p1 {

                font-weight: 400;
                font-size: 16px;
                color: #333333;
                line-height: 19px;
                text-align: center;

            }

            .p2 {
                font-weight: 400;
                font-size: 14px;
                color: #999999;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }
        }


    }
}
</style>